<template>
  <div class="app-container" style="width: fit-content; position: absolute; left: 20%">

    <div style="height: 200px">
      <div class="left" style="height: 200px; float: left; width: 50%">
        <div style="border:1px solid #444444; width: 40%; height: 40%; float:left;text-align: center;">
          <span>总交易数</span>
        </div>
        <div style="border:1px solid #444444; width: 40%; height: 40%; float: left; margin-left: 20px;text-align: center;">
          <span>有效交易数</span>
        </div>
        <div style="border:1px solid #444444; width: 40%; height: 40%; float: left; clear: left; margin-top: 20px;text-align: center;">
          <span>运行天数</span>
        </div>
        <div style="border:1px solid #444444; width: 40%; height: 40%; float: left; margin-left: 20px; margin-top: 20px;text-align: center;">
          <span>区块高度</span>
        </div>
      </div>
      <div class="right" style="float:left; width: 50%; height: 200px">
        <div id="chart" style="border:1px solid #444444; width: 400px; height: 180px; margin-left: 20px;text-align: center">
        </div>
      </div>
    </div>
    <br/>
    <Mtitle title="日志追踪" />
    <el-button
      style="position: absolute;left: 90%"
      type="text"
      size="big">
      更多>>
    </el-button>
    <br/><br/>
    <el-table
      :data="tableData1"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="owner"
        label="所有者">
      </el-table-column>
      <el-table-column
        prop="purpose"
        label="事件目的">
      </el-table-column>
      <el-table-column
        prop="detail"
        label="事件详情">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="level"
        label="响应等级">
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作">
          <el-button
            type="text"
            size="small">
            溯源
          </el-button>
      </el-table-column>
    </el-table>
    <br/>

    <div style="border:1px solid #444444; height: 300px">
      <Mtitle title="最新区块信息"></Mtitle>
    </div>
    <br/>

    <Mtitle title="区块信息" />
    <el-button
      style="position: absolute;left: 90%"
      type="text"
      size="big">
      更多>>
    </el-button>
    <br/><br/>
    <el-table
      :data="tableData2"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="hash"
        label="区块哈希"
        width="180">
      </el-table-column>
      <el-table-column
        prop="total"
        label="区块交易总数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="point"
        label="提案节点">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间戳">
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作">
        <el-button
          type="text"
          size="small">
          查看
        </el-button>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import Mtitle from '../components/Mtitle/Mtitle'

export default {
  name: 'Info',
  components: {Mtitle},
  data () {
    return {
      tableData1: [{
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }, {
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }, {
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }],
      tableData2: [{
        hash: '2016-05-02',
        total: 'xxxx',
        point: 'ddd',
        time: 'dddd'
      }]
    }
  },
  mounted () {
    this.chartLine = this.$echarts.init(document.getElementById('chart'))

    // 指定图表的配置项和数据
    var option = {
      tooltip: { // 设置tip提示
        trigger: 'axis'
      },
      color: ['#8AE09F', '#FA6F53'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
      title: {
        text: '最近7天交易事件统计',
        x: 'center'
      },
      xAxis: { // 设置x轴
        type: 'category',
        boundaryGap: false, // 坐标轴两边不留白
        data: ['9月2日', '9月3日', '9月4日', '9月5日', '9月6日', '9月7日', '9月8日'],
        name: 'DATE', // X轴 name
        nameTextStyle: { // 坐标轴名称的文字样式
          color: '#FA6F53',
          fontSize: 16,
          padding: [0, 0, 0, 20]
        },
        axisLine: { // 坐标轴轴线相关设置。
          lineStyle: {
            color: '#FA6F53'
          }
        }
      },
      yAxis: {
        boundaryGap: false, // 坐标轴两边不留白
        axisLine: {
          lineStyle: {
            color: '#FA6F53'
          }
        },
        type: 'value'
      },
      grid: {
        bottom: '1%',
        containLabel: true
      },
      series: [
        {
          name: '平均成绩',
          data: [20, 232, 201, 234, 300, 320, 210],
          type: 'line', // 类型为折线图
          lineStyle: { // 线条样式 => 必须使用normal属性
            normal: {
              color: '#8AE09F'
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option)
  }

}
</script>

<style scoped>
</style>
